<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2023/6/26
  Time: 16:41  详细地址:<input type="text" name="area1" value=""><br />
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/address/insert" method="post">
        <table width="100%" border="1" cellsapcing="5" cellpadding="20">
            <tr>
                <td width="100" align="right">收货人：</td>
                <td><input type="text" name="name" value=""></td>
            </tr>
            <tr>
                <td width="100" align="right">联系电话：</td>
                <td><input type="text" name="phone" value=""></td>
            </tr>
            <tr>
                <td width="100" align="right">具体地址：</td>
                <td>
                    <label for="area">省份:</label>
                    <select name="area" id="area" >
                        <option value="">请选择省份</option>
                        <option value="北京市">北京市</option>
                        <option value="上海市">上海市</option>
                        <option value="广东省">广东省</option>
                        <option value="江苏省">江苏省</option>
                        <option value="甘肃省">甘肃省</option>
                    </select>

                    <label for="areaa">城市:</label>
                    <select name="areaa" id="areaa"  disabled>
                        <option value="">请选择城市</option>
                    </select>

                    <label for="areab">区/县:</label>
                    <select  name="areab" id="areab" disabled>
                        <option value="">请选择区/县</option>
                    </select>
                </td>
            </tr>
            <script type="text/javascript">
                const areaaElement = document.querySelector('#areaa');
                const areabElement = document.querySelector('#areab');
                const areaaData = {
                    '北京市': ['北京市'],
                    '上海市': ['上海市'],
                    '广东省': ['广州市', '深圳市', '珠海市'],
                    '江苏省': ['南京市', '苏州市', '常州市'],
                    '甘肃省': ['兰州市', '嘉峪关市', '金昌市','白银市','天水市','武威市','张掖市','平凉市',
                        '酒泉市','庆阳市','定西市','陇南市']
                };
                const areabData = {
                    '北京市': ['东城区', '西城区', '朝阳区'],
                    '上海市': ['黄浦区', '静安区', '徐汇区'],
                    '广州市': ['天河区', '番禺区', '海珠区'],
                    '深圳市': ['福田区', '南山区', '宝安区'],
                    '珠海市': ['香洲区', '金湾区', '斗门区'],
                    '南京市': ['玄武区', '秦淮区', '鼓楼区'],
                    '苏州市': ['金阊区', '沧浪区', '平江区'],
                    '常州市': ['天宁区', '钟楼区', '新北区'],
                    '兰州市':['城关区','七里河区','西固区','安宁区','红古区','永登县','皋兰县','榆中县'],
                    '嘉峪关市':['市辖区'],
                    '金昌市':['金川区','永昌县'],
                    '白银市':['白银区','平川区','靖远县','会宁县','景泰县'],
                    '天水市':['秦城区','北道区','清水县','秦安县','甘谷县','武山县','张家川回族自治县'],
                    '武威市':['凉州区','民勤县','古浪县','天祝藏族自治县'],
                    '张掖市':['甘州区','肃南裕固族自治县','民乐县','临泽县','高台县','山丹县'],
                    '平凉市':['崆峒区','泾川县','灵台县','崇信县','华亭县','庄浪县','静宁县'],
                    '酒泉市':['肃州区','金塔县','安西县','肃北蒙古族自治县','阿克塞哈萨克族自治县','玉门市','敦煌市'],
                    '庆阳市':['西峰区','庆城县','环　县','华池县','合水县','正宁县','宁　县','镇原县'],
                    '定西市':['安定区','通渭县','陇西县','渭源县','临洮县','漳　县','岷　县'],
                    '陇南市':['武都区','成　县','文　县','宕昌县','康　县','西和县','礼　县','徽　县','两当县'],
                    '临夏回族自治州':['临夏市','临夏县','康乐县','永靖县','广河县','和政县','东乡族自治县','积石山保安族东乡族撒拉族自治县'],
                    '甘南藏族自治州':['合作市','临潭县','卓尼县','舟曲县','迭部县','玛曲县','碌曲县','夏河县']
                }

                function addOption(selectElement, value, text) {
                    const option = document.createElement('option');
                    option.value = value;
                    option.textContent = text;
                    selectElement.appendChild(option);
                }

                function renderCityData(area) {
                    areaaElement.innerHTML = '<option value="">请选择城市</option>';
                    areabElement.innerHTML = '<option value="">请选择区/县</option>';

                    if (area) {
                        areaaElement.disabled = false;
                        areabElement.disabled = true;

                        for (let areaa of areaaData[area]) {
                            addOption(areaaElement, areaa, areaa);
                        }
                    } else {
                        areaaElement.disabled = true;
                        areabElement.disabled = true;
                    }
                }

                function renderDistrictData(areaa) {
                    areabElement.innerHTML = '<option value="">请选择区/县</option>';

                    if (areaa) {
                        areabElement.disabled = false;

                        for (let areab of areabData[areaa]) {
                            addOption(areabElement, areab, areab);
                        }
                    } else {
                        areabElement.disabled = true;
                    }
                }

                document.querySelector('#area').addEventListener('change', (event) => {
                    renderCityData(event.target.value);
                });

                areaaElement.addEventListener('change', (event) => {
                    renderDistrictData(event.target.value);
                });
            </script>


            <tr>
                <td width="100" align="right">详细地址：</td>
                <td><textarea name="area1" ></textarea></td>
            </tr>
            <tr>
                <td width="100" align="right">类型：</td>
                <td><select name="types" ><option selected>家</option>
                </select></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="保存" id="b"/>
                </td>

            </tr>
        </table>

    </form>
</body>
</html>
